<template>
    <div class="mui-content carDoctorList mui-scroll-wrapper mgb4" id="DoctorListPull">
        <div class="mui-scroll">
            <ul v-for="doctor in list" class="mgt1 mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell">
                    <div class="col-2 headImgWrap">
                        <div class="headImg">
                            <img v-bind:src="doctor.cdImg" alt="{{doctor.cdName}}">
                        </div>
                    </div>
                    <div class="col-10">
                        <p class="doctorInfo text7-size color1">{{doctor.cdName}}</p>
                        <div class="jobTitleWrap mui-clearfix">
                            <p class="jobCall jobTitleType"  v-for="jobCall in doctor.cdTitle.split(',')">{{jobCall}}</p>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media">

                    <div class="skilfulWrap mui-clearfix">
                        <div class="col-2 text2-size color1">擅长：</div>
                        <div class="col-10 skilfulType">
                            <p class="skillBtn" v-for="skillType in doctor.cdSkill.split(',')">{{skillType}}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<style>
    .carDoctorList .headImgWrap{padding-right: 0.15rem; position: relative;}
    .carDoctorList .headImg{width: 1rem !important; height: 1rem !important; border-radius: 100%; z-index: 120; max-height: 1rem; max-width: 1rem; display: inline-block; display: inline-block; overflow: hidden;}
    .carDoctorList .headImg img{width: 100%; display: inline-block;}
    .carDoctorList .doctorInfo p:last-child{line-height: 0.5rem;}
    /*职称*/
    .carDoctorList .jobTitleWrap{margin-top: 0.15rem;}
    .carDoctorList .jobTitleWrap .jobCall{font-size: 0.25rem; padding: 0.01rem 0.1rem; display: inline-block; border: 1px solid #64CCFF; border-radius: 3px; color: #64CCFF; margin: 0 0.1rem 0.15rem 0;}
    /*擅长*/
    .carDoctorList .skilfulWrap{margin-top: 0.2rem;}
    .carDoctorList .skilfulWrap .skillBtn{font-size: 0.25rem; padding: 0.01rem 0.1rem; display: inline-block; border: 1px solid #F39C12; border-radius: 3px; color: #F39C12; margin: 0 0.1rem 0.15rem 0;}
    /*提问*/
    .carDoctorList .askBtn{padding-top: 0.2rem;}


</style>
<script type="text/ecmascript-6">
		import '../../fonts/mui.css';
        import Page from '../../base/Page'
        import { API } from '../../config/constants'
        export default new Page({
            data(){
                return {
                    list: [],
                }
            },
            ready () {
                this.getJSON(API.LIST_CARDOCTOR, {}, res => {
                    this.list = res.resultData
                })
                mui('.mui-scroll-wrapper').scroll({
                    indicators: true, //是否显示滚动条
                    deceleration : 0.0005,
                });

            },
            components:{

            }
    });
</script>

